<!DOCTYPE html> 
<html> 
<head> 
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta id="viewport" name="viewport"
		content="width=auto; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
	<title>jqmdp demo page</title> 
	
	<link rel="stylesheet" href="../../../js/jqm/jquery.mobile-1.0.css" />
	<script src="../../../js/jquery-1.6.4.js"></script>
	<script src="../../../js/jquery.mobile.jqmdp-1.0rc1.js"></script>
	<script src="../../../js/jqm/jquery.mobile-1.0.js"></script>

	<style>
		body > div{max-width: 320px;} /* It is like iPhone. */
	</style>
	
	<link rel="stylesheet" href="Picasa.css" />
	<script src="Picasa.js" charset="uft-8"></script>

</head>
<body >
	<div data-role="page" id="main"
				data-dp-scope="(new ImageManager($this,'#picasaDialog'))" >
		<div data-role="header" data-position="fixed" data-theme="e" >
			<h1>Picasa </h1>
		</div>
		<div data-role="content" >
			Picasa user:<input value="mytestaddr@gmail.com" 
				onchange="$('#picasaDialog').scope().setUser(this.value)"/>
			<br/>
			<div align="center">
				<img width="270px" data-dp-src="(src)" 
					onclick="$.scope(this).openDialog()" style="cursor:pointer;" />
				(Click image)
			</div>
		</div>
	</div>

	<!-- ===================================== -->
	<div data-role="dialog" id="picasaDialog" 
			data-dp-scope="(new Picasa($this,'mytestaddr@gmail.com'))">
		<div data-role="header" data-position="fixed" >
			<h1>画像選択</h1>
			<a data-icon="back" href="#" onclick="$.scope(this).listAlbum()" 
				data-iconpos="right">Album</a>
		</div>
		<div data-role="content" data-dp-id="picasa">
			<div class="dp-picasa">
				<div data-dp-id="albums">
					<h3>Picasa アルバム</h3>
					<div data-dp-for="(i=0; i<albums.length; i++)">
						<img data-dp-src="(album($this).thumbnail)" data-dp-args="(i)"
							onclick="$.scope(this).listPhoto(this)" />
					</div>
				</div>
			
				<div data-dp-id="photos">
					<h3>Picasa 写真</h3>
					<div data-dp-for="(i=0; i<photos.length; i++)">
						<img data-dp-src="(photo($this).thumbnail)" data-dp-args="(i)"
							onclick="$.scope(this).clickPhoto(this)"  />
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
